<!--
 * @Description: 
 * @Author: your name
 * @version: 
 * @Date: 2023-12-26 14:30:56
 * @LastEditors: your name
 * @LastEditTime: 2023-12-26 14:30:56
-->
<!-- 大屏面板 -->
<template>
    <div class="panel" :style="panelStyle">
        <div class="header">
            <slot name="head"></slot>
        </div>
        <div class="panelContent">
            <slot name="content"></slot>
        </div>
    </div>
</template>

<script setup>
defineProps({
    panelStyle: Object
})
</script>

<style lang="scss" scoped>
.panel {
    width: 370px;
    min-height: 200px;
    display: flex;
    flex-direction: column;


    .header {
        width: 100%;
        height: 38px;
        background: url(/src/assets/bigscreenAssets/panel.png);
        background-size: 100% 100%;
        padding-left: 44px;
        display: flex;
        align-items: center;
        color: #fff;
    }

    .panelContent {
        width: 100%;
        flex: 1;
    }
}
</style>
